<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <canvas id="myCanvas" height="500px" width="500px" style="border: solid 1px black">24242423</canvas>
</body>
<script>
    function drawline() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(10,10);
        ctx.lineTo(50,50);
        ctx.lineTo(50,100);
        ctx.lineTo(10,10);
        ctx.stroke();

        ctx.beginPath();
        ctx.lineTo(200,200);
        ctx.lineTo(250,200);
        ctx.lineTo(250,250);
        ctx.lineTo(300,250);
        ctx.lineTo(300,200);
        ctx.lineTo(350,200);
        ctx.lineTo(350,250);
        ctx.lineTo(300,250);
        ctx.lineTo(300,300);
        ctx.lineTo(350,300);
        ctx.lineTo(350,350);
        ctx.lineTo(300,350);
        ctx.lineTo(300,300);
        ctx.lineTo(250,300);
        ctx.lineTo(250,350);
        ctx.lineTo(200,350);
        ctx.lineTo(200,300);
        ctx.lineTo(250,300);
        ctx.lineTo(250,250);
        ctx.lineTo(200,250);
        ctx.lineTo(200,200);
        ctx.stroke();


    }
     window.addEventListener("load",drawline,true);
</script>
</html>